<template>
  <template v-if="list.length > 0">
    <div
      ref="container"
      class="scure-list"
      @drop="drop"
      @dragover="cancleEvent"
    >
      <div
        v-for="(item, key) in list"
        :key="key"
        class="card flex gr-8 flex-col relative"
        :class="{ active: selectKeys.has(item.id) }"
        @click="selectItem(item)"
        @touch="selectItem(item)"
      >
        <div v-if="selectKeys.has(item.id)" class="checked absolute">
          <img :src="checkedPng" width="20" />
        </div>
        <div class="text-32 card-title">
          <input
            v-model="item.title"
            data-input
            style="text-transform: uppercase"
            type="text"
            placeholder="请输入平台名字"
            @click.stop=""
          />
        </div>
        <div>
          <input
            v-model="item.account"
            placeholder="请输入账号"
            data-input
            type="text"
            @click.stop=""
          />
        </div>
        <div class="relative input">
          <input
            ref="inputs"
            v-model="item.password"
            data-input
            type="password"
            placeholder="请输入密码"
            @click.stop=""
          />
          <div class="toolbar flex-s gc-2">
            <template v-for="(m, n) in actions" :key="n">
              <div class="relative" :title="m.title">
                <img
                  :src="m.img"
                  width="20"
                  height="20"
                  style="object-fit: contain"
                  @click.stop="m.action(item, key)"
                  @touch.stop="m.action(item, key)"
                />
              </div>
            </template>
          </div>
        </div>
        <div class="flex-1">
          <textarea
            v-model="item.desc"
            class="h-100"
            placeholder="描述信息"
            @click.stop=""
          ></textarea>
        </div>
        <div class="line"></div>
      </div>
    </div>
  </template>
  <template v-else>
    <div class="h-100 flex flex-s" @drop="drop" @dragover="cancleEvent">
      <div class="text-center">
        <div class="text-666">没有任何东西</div>
        <div class="text-666 text-14">
          赶快
          <span class="create" @click="create" @touch="create">新建</span>
          一个吧
        </div>
        <div class="text-666"> 将配置文件拖入本窗口,即可导入 </div>
      </div>
    </div>
  </template>
</template>

<script setup lang="ts">
  /* 图片 */
  import eye from '@/assets/images/eye.png';
  import copy from '@/assets/images/copy.png';
  import checkedPng from '@/assets/images/checked.png';
  import refresh from '@/assets/images/refresh.png';

  /* 图片 */
  import { computed, nextTick, onMounted, ref } from 'vue';
  import { copyText } from '@/utils/utils';
  import { Card } from '@/store/modules/program/types';
  import { programData } from '@/store/modules/program/utils';
  import { selectKeys, create, generatePassword } from '../bus';
  import { message } from '../message/bus';
  import { cancleEvent, drop } from './recover';

  const inputs = ref();
  const container = ref();
  const actions = [
    {
      img: refresh,
      title: '刷新密码',
      action(item: Card) {
        item.password = generatePassword();
        message('已刷新');
      },
    },
    {
      img: copy,
      title: '复制',
      action(item: Card) {
        copyText(item.password);
        message('成功复制');
      },
    },
    {
      img: eye,
      title: '显示密码',
      action(item: Card, index: number) {
        const elements = inputs.value as HTMLInputElement[];
        item.showPassword = !item.showPassword;
        if (!item.showPassword) {
          elements[index].type = 'password';
        } else {
          elements[index].type = 'text';
        }
      },
    },
  ];
  /*
      input框聚焦选择文本
      刚进入页面触发
      新建一项时触发
   */
  const focusToSelect = () => {
    nextTick(() => {
      const elements = document.querySelectorAll('[data-input]');
      elements.forEach((inputEl: any) => {
        inputEl.onfocus = () => {
          inputEl.select();
        };
        inputEl.onclick = (e: Event) => {
          e.stopPropagation();
          e.preventDefault();
        };
      });
    });
  };
  onMounted(() => {
    focusToSelect();
  });

  const selectItem = (item: Card) => {
    if (!selectKeys.value.has(item.id)) {
      selectKeys.value.add(item.id);
    } else {
      selectKeys.value.delete(item.id);
    }
  };

  const list = computed(() => {
    return programData().list;
  });

  /* 滚动到底部 */
  // const scrollToBottom = () => {
  //   nextTick(() => {
  //     const el = container.value as HTMLElement;
  //     el.scrollTo({
  //       top: el.clientHeight,
  //     });
  //   });
  // };
</script>

<style lang="scss" scoped>
  @import './style';
</style>
